<script setup>
import { Plus, Delete } from '@element-plus/icons-vue'
import { onBeforeUnmount, watch } from 'vue'
import { compressImg, getExifFromFile } from "@/hook/universality"
import dayjs from 'dayjs'
import mapTool from '@/hook/useBaiduMap'

// 编辑的editNote主体，是否有添加/覆盖选择按钮，设置外部变量的方法（控制发布按钮）
const props = defineProps(['editNote', 'haveCover', 'setIsLoad'])
const SIZE = 15, index = ref(0) // 给图片计数，用于命名
const count = ref(0) // 给图片计数，用于压缩时控制按钮
watch(count, n => n ? props.setIsLoad(true) : props.setIsLoad(false))

// 记录一下首次获取到的数据项内容，用于更新数据时添加或覆盖
props.editNote.rawImgs = JSON.parse(JSON.stringify(props.editNote.noteImgs))

// 更改文件名列表方法，考虑了覆盖和添加情况
const updateKeys = (fs) => {
  if (props.editNote.isCoverImgs) props.editNote.noteImgs = fs.map(i => i.key)
  else props.editNote.noteImgs = [...props.editNote.rawImgs, ...fs.map(i => i.key)]
}

// 当覆盖/添加变化时，更新文件名
watch(() => props.editNote.isCoverImgs, n => updateKeys(props.editNote.fImgs ?? []))

// 关闭图片编辑后，自动删除附加属性
onBeforeUnmount(() => {
  delete props.editNote.isCoverImgs // 是否覆盖
  delete props.editNote.isRawImgs // 是否原图
  delete props.editNote.fImgs // 文件File对象列表
  delete props.editNote.rawImgs // 原本的文件名列表，用户覆盖删除
})

// 删除文件时
const handleRemove = (f, fs) => updateKeys(fs)

// :on-change="handleChange" // 状态变化，添加文件、上传成功、失败
const handleChange = (f, fs) => {
  const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];

  // 判断是否是图片,判断大小
  if (typeArr.indexOf(f.raw.type) < 0 || f.raw.size > SIZE * 1024 * 1024) {
    fs.pop()
    console.log("图片size:" + f.raw.size / 1024 / 1024 + " type:" + f.raw.type)
    myMsgE('图片不符合要求')
    return false
  }

  // 文件名，并给noteImgs 赋值文件名
  f.key = dayjs().format("YYMMDD_HHmm") + '-' + index.value++ + "-" + f.name
  updateKeys(fs)

  // exifdata 是raw解析的exif数据
  getExifFromFile(f.raw)

  // raw 是原始文件，compressImg是压缩文件，compressImg95是轻微压缩
  count.value++
  compressImg(f.raw).then(res => {
    res.exifdata = f.raw.exifdata
    res.iptcdata = f.raw.iptcdata
    f.compressImg = res
    count.value--
  })
  count.value++
  compressImg(f.raw, 0.98).then(res => {
    res.exifdata = f.raw.exifdata
    res.iptcdata = f.raw.iptcdata
    f.compressImg95 = res
    count.value--
  })
}

// 自动用Exif信息补全
const useExif = () => {
  let exif = null, haveItems = [false, false]
  for (const img of props.editNote.fImgs) {
    exif = img.raw.exifdata
    if (JSON.stringify(exif) == "{}") continue
    if (!haveItems[0] && exif.DateTime) {
      // "2023:03:08 16:07:01" 转为 "2023-03-23 16:07:01"
      props.editNote.noteTime = exif.DateTime.replace(':', '-').replace(':', '-')
      haveItems[0] = true
    }
    if (!haveItems[1] && exif.GPSLongitude && exif.GPSLatitude) {
      let lng = exif.GPSLongitude, lat = exif.GPSLatitude
      lng = lng[0] + lng[1] / 60 + lng[2] / 3600;
      lat = lat[0] + lat[1] / 60 + lat[2] / 3600;
      let gpsPoint = new BMap.Point(lng, lat)
      // 图片里面是GPS坐标，要专为百度地图用的bd09ll
      new BMap.Convertor().translate([gpsPoint], 1, 5, p => {
        if (!props.editNote.noteLocation) props.editNote.noteLocation = []
        props.editNote.noteLocation[0] = [p.points[0].lng, p.points[0].lat]
      })
      haveItems[1] = true
    }

    let f = haveItems.reduce((total, currentValue) => total && currentValue, true)
    if (f) return; else continue;
  }

  let f = haveItems.reduce((total, currentValue) => total || currentValue, false)
  if (!f) ElMessage.error('没有提取到信息')
}

</script>

<template>
  <div>
    <el-upload class="el-upload" v-model:file-list="editNote.fImgs" list-type="picture-card" multiple :auto-upload="false"
      :on-change="handleChange" :on-remove="handleRemove">
      <el-icon>
        <Plus />
      </el-icon>
    </el-upload>
    <el-button v-if="editNote.noteImgs.length" @click="useExif" size="small"
      style="margin-right: 10px;">提取时间位置</el-button>
    <el-switch v-if="haveCover == ''" v-model="editNote.isCoverImgs" size="small" inline-prompt active-text="覆盖"
      inactive-text="添加" />
    <el-switch v-if="editNote.noteImgs" v-model="editNote.isRawImgs" size="small" inline-prompt active-text="原图"
      inactive-text="高清" />
    <span style="font-size: 12px;color:var(--mini-text-color)">图片小于{{ SIZE }}MB</span>
  </div>
</template>

<style scoped lang="less">
// 图片超出给滚动条
.el-upload {
  width: 100%;
  overflow-x: scroll;
  justify-content: flex-start;
}

/* 让图片不换行 */
::v-deep(.el-upload-list) {
  flex-wrap: nowrap;

  /* 定义内部卡片的大小 */
  >li,
  >div {
    height: 100px;
    width: 100px;
    margin: 0px;
    margin-right: 5px;
  }

  /* 只显示删除按钮 */
  .el-upload-list__item-preview {
    display: none !important;
  }

  // 居中
  .el-upload-list__item-delete {
    margin: 0px !important;
  }

  .el-upload-list__item-thumbnail {
    object-fit: cover !important;
  }
}

// 按钮
.el-switch {
  margin-right: 10px;

  ::v-deep(.el-switch__core) {
    --el-switch-off-color: var(--el-color-primary);
    --el-switch-on-color: #13ce66;
  }
}

// .inline-prompt </style>